<template>
    <div style="width: 100%;/*height: 282px;*/margin-top: 50px;">
        <div class="v-fl">
            <div class="circle-around" id="circleOne1">
                <p class="c-yellow wd-fb"><ICountUp
                    :endVal="parseInt(indexData)"
                    :key="Math.random()"
                    @ready="onReady"
                /></p>
                <p><span class="c-yellow wd-fb"></span> 总接待</p>
            </div>
            <div class="circle-around" id="circleOne2" @click="onLoad(3)">
                <p class="c-orange wd-fb"><ICountUp
                    :endVal="parseInt(indexData)"
                    :key="Math.random()"
                    @ready="onReady"
                /></p>
                <p>
                    <span class="c-orange wd-fb"></span> 不见面</p>
            </div>
        </div>
        <div class="circle v-fl">
            <div class="inner-ring">
                <div class="font">完成率</div>
            </div>
            <div class="outer-ring rotates">
            </div>
        </div>
        <div class="v-fl">
            <div class="circle-around" id="circleOne3" @click="onLoad(2)">
                <p class="c-blue wd-fb" style="text-align: left"><ICountUp
                    :endVal="parseInt(indexData)"
                    :key="Math.random()"
                    @ready="onReady"
                /></p>
                <p style="text-align: left">总办件 <span class="c-blue wd-fb">

                </span> </p>
            </div>
            <div class="circle-around" id="circleOne4" @click="onLoad(4)">
                <p class="c-green wd-fb" style="text-align: left"><ICountUp
                    :endVal="parseInt(indexData)"
                    :key="Math.random()"
                    @ready="onReady"
                /></p>
                <p style="text-align: left">一窗
                    <span class="c-green wd-fb">

                    </span>
                    </p>
            </div>
        </div>
<!--
        <center-pop v-if="display==1" id="circleOneSubindex1" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClass"></center-pop>
-->

        <!--展示修改-->
       <!-- <center-pop v-if="display==2" id="circleOneSubindex2" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClass"></center-pop>
        <center-pop v-if="display==3" id="circleOneSubindex3" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClassNo"></center-pop>
        <center-pop v-if="display==4" id="circleOneSubindex4" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClassOne"></center-pop>
   -->
    </div>

</template>

<script>
    import ICountUp from 'vue-countup-v2'
    import { popViewCenter } from '@/utils/viewPopup.js'
   // import { CenterPop } from '@/components/panel'
    export default {
        name:'CircleOne',
        data() {
            return {
                dataType: 'gapCase',
                dataRange: 'all',
                mainClass: 'all',
                mainClassOne: 'one',
                mainClassNo: 'no',
                display: 0,  //弹窗都不显示
            }
        },
        components:{
            //CenterPop,
            ICountUp,
        },
        props:['indexData'],
        mounted(){
        },
        methods:{
            onReady(instance, CountUp) {
               // instance.update();
            },
            onLoad(index){
                this.display=index;
                this.$nextTick(() => {
                    popViewCenter("#circleOneSubindex"+index);
                });
            }
        },
        created(){

        },
    }

</script>
<style lang="less" scoped>
    .circle{
        position: relative;
        margin: 0 35px;
        .inner-ring{
            width: 252px;
            height: 252px;
            background-image: url(img/Inner-ring.png);
            .font{
                color: #67BBD0; text-align: center;font-size: 46px;
                line-height: 238px;
            }
        }
        .outer-ring{
            width: 303px;
            height: 302px;
            position: absolute;
            top: -24px;
            left: -26px;
            background-image: url(img/outer-ring.png);
        }
    }
    .circle-around{
        color: lighten(#67BBD0, 15%);
        margin-top: 25px;
        p{
            text-align: right;
            font-size: 40px;
        }
    }

    .wd-fb{
        font-weight: bold;
    }
    .c-yellow{
        font-size: 36px!important;
    }
    .c-blue {
         font-size: 56px;
         font-weight: bold;
         span {
             font-size: 30px;
         }
     }
    /*转圈开始*/
    @keyframes rotates{
        from{transform:rotate(0deg);
            -ms-transform:rotate(0deg); /* Internet Explorer */
            -moz-transform:rotate(0deg); /* Firefox */
            -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
            -o-transform:rotate(0deg); /* Opera */}
        to{
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* Internet Explorer */
            -moz-transform:rotate(360deg); /* Firefox */
            -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
            -o-transform:rotate(360deg);
        }
    }
    .rotates{
        animation: rotates 5s linear infinite;
        -webkit-animation: rotates 5s linear infinite;
    }
</style>


